<script>
/**
 * Sales Analytics component
 */
export default {
  props: ["dataDistribute"],
  data() {
    return {
      series: [42, 26, 15],
      chartOptions: {
        chart: {
          height: 230,
          type: "donut",
        },
        labels: ["有效信源", "失效信源", "抓取异常"],
        plotOptions: {
          pie: {
            donut: {
              size: "75%",
            },
          },
        },
        dataLabels: {
          enabled: false,
        },
        legend: {
          show: false,
        },
        colors: ["#5664d2", "#1cbb8c", "#eeb902"],
      },
      sel: "全部类型",
    };
  },
  methods: {
    handleCommand(value) {
      this.sel = value;
    },
    jump(v){
      console.log(v);
      this.$router.push({
        path: '/seed',
        query: {
          type: v
        }
      })
    },
  },
};
</script>

<template>
  <div class="card">
    <div class="card-body">
      <div class="float-right">
        <!-- <select class="custom-select custom-select-sm">
          <option selected>全部类型</option>
          <option value="1">Mar</option>
          <option value="2">Feb</option>
          <option value="3">Jan</option>
        </select> -->
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ sel }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="全部类型">全部类型</el-dropdown-item>
            <el-dropdown-item command="资讯数据">资讯数据</el-dropdown-item>
            <el-dropdown-item command="招标数据">招标数据</el-dropdown-item>
            <el-dropdown-item command="工商数据">工商数据</el-dropdown-item>
            <el-dropdown-item command="招聘数据">招聘数据</el-dropdown-item>
            <el-dropdown-item command="股票数据">股票数据</el-dropdown-item>
            <el-dropdown-item command="政策数据">政策数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <h4 class="card-title mb-4" style="font-size: 17px">
        48小时信源状态分布
      </h4>

      <div id="donut-chart" class="apex-charts"></div>
      <apexchart
        class="apex-charts"
        height="230"
        dir="ltr"
        :series="series"
        :options="chartOptions"
      ></apexchart>
      <div class="row">
        <div class="col-4">
          <div @click="jump('有效信源')" class="text-center mt-4" style="cursor: pointer;">
            <p class="mb-2 text-truncate">
              <i class="mdi mdi-circle text-primary font-size-10 mr-1"></i>
              有效信源
            </p>
            <h5>{{dataDistribute.valid_source}}</h5>
          </div>
        </div>
        <div class="col-4">
          <div @click="jump('失效信源')" class="text-center mt-4" style="cursor: pointer;">
            <p class="mb-2 text-truncate">
              <i class="mdi mdi-circle text-success font-size-10 mr-1"></i>
              失效信源
            </p>
             <h5>{{dataDistribute.invalid_source}}</h5>
          </div>
        </div>
        <div class="col-4">
          <div @click="jump('抓取异常')" class="text-center mt-4" style="cursor: pointer;">
            <p class="mb-2 text-truncate">
              <i class="mdi mdi-circle text-warning font-size-10 mr-1"></i>
              抓取异常
            </p>
             <h5>{{dataDistribute.grab_exception}}</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>